<template>
  <div>
    <!-- 外层的框 -->
    <div class="box">
      <!-- 内部的框 -->
      <div class="content">
        <!-- 顶部显示屏 -->
        <input type="text" class="view-box" readonly v-model="this.inputValue">
        <!-- 按键区域 -->
        <ul class="btn-list">
          <li class="red" @click="qingkong">c</li>
          <li class="blue">+/-</li>
          <li class="blue">%</li>
          <li class="right-margin widtha red" @click="deleteStr">←</li>

          <li @click="aa(7)">7</li>
          <li @click="aa(8)">8</li>
          <li @click="aa(9)">9</li>
          <li class="blue" @click="xx2">
            X
            <sup>2</sup>
          </li>
          <li class="right-margin blue">√</li>

          <li @click="aa(4)">4</li>
          <li @click="aa(5)">5</li>
          <li @click="aa(6)">6</li>
          <li class="blue" @click="aa('*')">x</li>
          <li class="right-margin blue" @click="aa('/')">÷</li>

          <li @click="aa(1)">1</li>
          <li @click="aa(2)">2</li>
          <li @click="aa(3)">3</li>
          <li class="blue" @click="aa('+')">+</li>
          <li class="right-margin blue" @click="aa('-')">-</li>

          <li class="widtha" @click="aa(0)">0</li>
          <li @click="aa('.')">.</li>
          <li class="right-margin widtha red" @click="qiuhe">=</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import "../css/render.css";
export default {
  data() {
    return {
      inputValue: "",
      dianFlag: true
    };
  },
  methods: {
    aa(val) {
      // 变为字符串
      let newVal = val.toString();
      // 得到最后一个字符
      let lastStr = this.inputValue.slice(this.inputValue.length - 1);
      if (
        (lastStr == "+" ||
          lastStr == "" ||
          lastStr == "-" ||
          lastStr == "*" ||
          lastStr == "/") &&
        (newVal == "+" || newVal == "-" || newVal == "*" || newVal == "/")
      )
        return;
      // 判断点的输入
      if (
        lastStr == "+" ||
        lastStr == "" ||
        lastStr == "-" ||
        lastStr == "*" ||
        lastStr == "/"
      ) {
        this.dianFlag = true;
      }
      if (newVal == ".") {
        if (this.dianFlag) {
          this.inputValue += ".";
          this.dianFlag = false;
        }
        return;
      }
      this.inputValue += newVal;
    },
    // 求和    =    键
    qiuhe() {
      // 尝试运行
      try {
        this.inputValue = eval(this.inputValue).toString();
      } catch {
        this.inputValue = "NaN";
      }
    },
    // 清除     C   键
    qingkong() {
      this.inputValue = "";
    },
    // 求平方
    xx2() {
      // 线将框里面的求出来
      this.qiuhe();
      // 再算平方
      this.inputValue = (this.inputValue * this.inputValue).toString();
    },
    // 删除建  ←
    deleteStr() {
      this.inputValue = this.inputValue.slice(0, this.inputValue.length - 1);
    }
  }
};
</script>
<style>
.box {
  width: 275px;
  height: 338px;
  border: 1px solid #e8e8e8;
  margin: 80px auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  background-color: #f8f9f8;
}
.view-box {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.btn-list > li {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  float: left;
  text-align: center;
  line-height: 45px;
  background: linear-gradient(to bottom, #f5f6f5, #f1f1f1, #ebeceb);
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn-list > li:hover {
  border-color: #15b1ff;
}
.right-margin {
  margin-right: 0px !important;
}
.widtha {
  width: 91.6px !important;
}
.blue {
  color: #15b1ff;
}
.red {
  color: #ff3e39;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
  margin: 0;
  padding: 0;
}
header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th {
  text-align: left;
  font-weight: normal;
}
html,
body,
fieldset,
img,
iframe,
abbr {
  border: 0;
}
i,
cite,
em,
var,
address,
dfn {
  font-style: normal;
}
[hidefocus],
summary {
  outline: 0;
}
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
small {
  font-size: 100%;
}
sup,
sub {
  font-size: 83%;
}
pre,
code,
kbd,
samp {
  font-family: inherit;
}
q:before,
q:after {
  content: none;
}
textarea {
  overflow: auto;
  resize: none;
}
label,
summary {
  cursor: default;
}
a,
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
  font-weight: bold;
}
del,
ins,
u,
s,
a,
a:hover {
  text-decoration: none;
}
body,
textarea,
input,
button,
select,
keygen,
legend {
  font: 12px/1.14 arial, \5b8b\4f53;
  color: #333;
  outline: 0;
}
body {
  background: #fff;
}
a,
a:hover {
  color: #333;
}
</style>